<template>
    <div class="content">
        <Headerstore title="店铺"></Headerstore>
        <div class="logo">
        </div>
        <div class="header">
            <span>{{ title }}</span>
            <img :src="img" alt="">
        </div>
        <van-tabs v-model:active="active" color="#ffc400">
            <van-tab v-for="(item, index) in list" :key="index" :title="`${item.tab}`">
                <Foodlist :index="index" :show="false"></Foodlist>
            </van-tab>
        </van-tabs>
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" />
            <van-action-bar-icon icon="cart-o" text="购物车" :badge="store.state.num" @click="gotocart" />
            <!-- <van-action-bar-button type="warning" text="加入购物车" @click="addcart" /> -->
            <van-action-bar-button type="danger" text="立即购买" @click="gobuy" />
        </van-action-bar>

        <!-- <Footer></Footer> -->
    </div>
</template>


<script>
import Footer from '../../components/Footer.vue'
import Headerstore from '../../components/Header.vue'
import Foodlist from '../../components/store/Foodlist.vue'
import { reactive, toRefs } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
export default {
    components: {
        Footer, Headerstore, Foodlist
    },
    setup() {
        let store = useStore()
        let router = useRouter()
        let data = reactive({
            // activeIndex: 0,
            list: [
                { tab: '点菜' },
                { tab: "评价" },
                { tab: "商家" },
            ],
            title: '鱼拿酸菜鱼',
            img: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5',
            fooddata: [
                {
                    text: '热销套餐',
                    children: [
                        { num: 0, id: 0, txt: '无骨酸菜鱼+肥牛双拼', price: 10, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                        { num: 0, id: 1, txt: '香辣水煮鱼+肥羊双拼', price: 20, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                        { num: 0, id: 2, txt: '红烧胖头鱼+大盘鸡', price: 30, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                        { num: 0, id: 3, txt: '满汉全席', price: 40, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                    ],
                },
                {
                    text: '超级折扣',
                    children: [
                        { num: 0, id: 0, txt: '无骨酸菜熊+肥龙双拼', price: 10, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                        { num: 0, id: 1, txt: '香辣水煮熊+肥鹅双拼', price: 20, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                        { num: 0, id: 2, txt: '红烧胖头熊+大盘鸡', price: 30, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                        { num: 0, id: 3, txt: '铁锅炖大鹅', price: 40, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                    ],
                },
                {
                    text: '澳洲肥牛',
                    children: [
                        { num: 0, id: 0, txt: '无骨酸菜鱼+肥牛双拼', price: 10, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                        { num: 0, id: 1, txt: '香辣水煮鱼+肥羊双拼', price: 20, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                        { num: 0, id: 2, txt: '红烧胖头鱼+大盘鸡', price: 30, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                        { num: 0, id: 3, txt: '满汉全席', price: 40, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                    ],
                },
                {
                    text: 'emmm',
                    children: [
                        { num: 0, id: 0, txt: '无骨酸菜鱼+肥牛双拼', price: 10, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                        { num: 0, id: 1, txt: '香辣水煮鱼+肥羊双拼', price: 20, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                        { num: 0, id: 2, txt: '红烧胖头鱼+大盘鸡', price: 30, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                        { num: 0, id: 3, txt: '满汉全席', price: 40, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                    ],
                },
                {
                    text: 'emmmm',
                    children: [
                        { num: 0, id: 0, txt: '无骨酸菜鱼+肥牛双拼', price: 10, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                        { num: 0, id: 1, txt: '香辣水煮鱼+肥羊双拼', price: 20, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                        { num: 0, id: 2, txt: '红烧胖头鱼+大盘鸡', price: 30, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                        { num: 0, id: 3, txt: '满汉全席', price: 40, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                    ],
                },
                {
                    text: 'emmmmm',
                    children: [
                        { num: 0, id: 0, txt: '无骨酸菜鱼+肥牛双拼', price: 10, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                        { num: 0, id: 1, txt: '香辣水煮鱼+肥羊双拼', price: 20, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                        { num: 0, id: 2, txt: '红烧胖头鱼+大盘鸡', price: 30, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                        { num: 0, id: 3, txt: '满汉全席', price: 40, pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5' },
                    ],
                },
            ],
        })
        let cartlist = []
        data.fooddata.forEach((item) => {
            // item.foodlist?.forEach((item) => {
            cartlist.push(item)
            // })
        });
        store.commit('addcart', cartlist)
        // console.log('2',store.state.cartlist);
        const addcart = (type) => {
            // let newlist = []
            // let num = 0
            // data.fooddata.forEach((item) => {
            //     item.foodlist?.forEach((item) => {
            //         if (item.num > 0) {
            //             // newlist += item.num
            //             newlist.push(item)
            //             num += item.num
            //         }
            //     })

            // })
            // // console.log(newlist,num);
            // if (newlist.length == 0) {
            //     // console.log(data.fooddata);
            //     showToast('请选择商品');
            //     return
            // }
            // store.commit('addcart', newlist)
            // store.commit('addnum', num)
            // type === 'buy' ? gotocart() : ''
        }
        const gotocart = () => {
            router.push('/cart')
        }
        const gobuy = () => {
            // let cartlist = []
            // let num = 0
            // data.fooddata.forEach((item) => {
            //     item.foodlist?.forEach((item) => {
            //         if (item.num > 0) {
            //             // newlist += item.num
            //             cartlist.push(item)
            //             num += item.num
            //         }
            //     })

            // })
            // console.log(newlist,num);
            if (store.state.num == 0) {
                // console.log(data.fooddata);
                showToast('请选择商品');
                return
            }
            router.push('/cart')
            // console.log(store.state.cartlist);
        }
        // console.log('父', a);
        // console.log('父data.fooddata', data.fooddata);
        return { ...toRefs(data), addcart, store, gotocart, gobuy }
    }
}
</script>

<style lang="scss" scoped>
.content {
    // background-color: red;

}

.logo {
    // width: 100%;
    height: 120px;
    display: block;
    background: url('https://img.zcool.cn/community/01709b5cfbda59a801205e4b139d8f.jpg@1280w_1l_2o_100sh.jpg') no-repeat center/cover;
    border: 0;

}

.header {

    margin-top: -30px;
    background-color: #fff;
    border-radius: 30px 30px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    span {
        margin-left: 40px;
        font-weight: 500;
        transform: translateY(-5px);
        font-size: 18px;
    }

    img {
        margin-right: 20px;
        height: 80px;
        width: 100px;
        transform: translateY(-5px);
        border-radius: 10px;
    }
}

:deep .van-tab__text--ellipsis {
    font-size: 14px;
}

:deep .van-tab__text--ellipsis {
    overflow: visible;
}

:deep .van-tabs__line {
    bottom: 3px;
}

:deep .van-tabs--line .van-tabs__wrap {
    height: 30px;
}

:deep .van-tabs__nav--line {
    padding-bottom: 0px;
}

:deep .van-tabs__line {
    bottom: 0;
    width: 20px;
    height: 3px;
}
</style>